<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>代号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="puordermodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          v-model="puordermodelInJson.DocDate"
        ></el-date-picker>
      </el-col>
      <el-col class="el-span-c">
        <span>供应商</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <SupplierSelector v-model="puordermodelInJson.Suppiler"/>
      </el-col>
      <el-col class="el-span-c">
        <span></span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-steps :simple="false" :space="80" :active="1" finish-status="success">
          <el-step title="制单"></el-step>
          <el-step title="审核"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>来源单号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="puordermodelInJson.SrcOrder"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>业务员</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <UserSelector v-model="puordermodelInJson.Purchaser"/>
      </el-col>
      <el-col class="el-span-c">
        <span>联系方式</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="puordermodelInJson.Contract"></el-input>
      </el-col>
      <el-col class="el-span-c"></el-col>
      <el-col class="el-input-normal-c"></el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>送货地址</span>
      </el-col>
      <el-col class="el-input-large-c">
        <el-input v-model="puordermodelInJson.DeliveryAddress"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>备注</span>
      </el-col>
      <el-col class="el-input-large-c">
        <el-input v-model="puordermodelInJson.Note"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>可交付日期</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          v-model="puordermodelInJson.DeliveryDate"
        ></el-date-picker>
      </el-col>
    </el-row>
    <div>
      <PuOrderGridEditor ref="oge" :rowData="puorderdetailInJson"/>
    </div>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
        </el-button-group>
        <el-button-group>
          <el-button
            size="mini"
            :disabled="!puordermodelInJson.Code||puordermodelInJson.Code===''"
            @click="pickerVisible = true"
          >增行</el-button>
          <el-button size="mini" :disabled="puorderdetailInJson.length===0" @click="rmRow">删行</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
    <el-dialog :visible.sync="pickerVisible" :modal="false">
      <ProductionPicker
        :multiple="true"
        :autoset="true"
        @confirm="addRow"
        @ignore="pickerVisible=false"
      />
    </el-dialog>
  </el-dialog>
</template>
<script>
import SupplierSelector from '@/components/Selector/SupplierSelector'
import UserSelector from '@/components/Selector/UserSelector'
import PuOrderGridEditor from '@/components/GridEditor/PuOrderGridEditor'
import ProductionPicker from '@/components/DataPicker/ProductionPicker.vue'

import { setPuOrder, get } from '@/api/puorder'
import { Model } from 'vue-property-decorator'
import { warn } from 'vue-class-component/lib/util'

export default {
  components: {
    SupplierSelector,
    UserSelector,
    ProductionPicker,
    PuOrderGridEditor
  },
  data() {
    return {
      dialogVisible: false,
      puordermodelInJson: {},
      puorderdetailInJson: [],
      pickerVisible: false
    }
  },

  watch: {
    puordermodel: function(value) {
      this.puordermodelInJson = value
      if (this.puordermodelInJson && this.puordermodelInJson.AutoId > 0) {
        get(this.puordermodelInJson.AutoId)
          .then(response => {
            if (response.Result === 0) {
              this.puorderdetailInJson = response.Detail
            } else {
              this.$alert(response.Message, '获取数据失败')
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.puorderdetailInJson = []
      }
    }
  },
  props: { puordermodel: Object },
  methods: {
    onSubmit() {
      setPuOrder(this.puordermodelInJson, this.puorderdetailInJson)
        .then(response => {
          if (response.Result === 0) {
            this.puordermodelInJson = response.Data
            this.puorderdetailInJson = response.Detail
            this.$message('保存成功')
            this.$emit('puOrderSaveComplete', this.puordermodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    addRow(productions) {
      for (let midx in productions) {
        let minTmpid = 0
        let skip = false
        for (let idx in this.puorderdetailInJson) {
          if (
            this.puorderdetailInJson[idx].minTmpid &&
            this.puorderdetailInJson[idx].minTmpid < minTmpid
          ) {
            minTmpid = this.puorderdetailInJson[idx].minTmpid
          }
          if (
            this.puorderdetailInJson[idx].ProductionId ===
            productions[midx].AutoId
          ) {
            this.$message('production=' + productions[midx].Name + '已存在')
            skip = true
            break
          }
        }
        if (skip) {
          continue
        }
        this.puorderdetailInJson.push({
          AutoId: 0,
          minTmpid: minTmpid - 1,
          OrderId: this.puordermodelInJson.AutoId
            ? this.puordermodelInJson.AutoId
            : 0,
          ProductionId: productions[midx].AutoId,
          ProductionStd: productions[midx].Specification,
          ProductionCode: productions[midx].Code,
          ProductionName: productions[midx].Name,
          Unit: productions[midx].Unit,
          Combination: productions[midx].Combination,
          Qty: 1,
          //OrgPrice: productions[midx].Price,
          //OrgAmount: productions[midx].Price,
          Price: 0,
          Amount: 0
        })
      }
      this.pickerVisible = false
    },
    rmRow() {
      const selectedData = this.$refs.oge.getSelected()
      if (selectedData.length === 0) {
        this.$message('请先选中需要删除的行')
        return
      }
      this.$confirm(
        '将会删除' + selectedData.length + '笔记录, 是否继续?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      )
        .then(() => {
          for (let idx in selectedData) {
            for (let rIdx in this.puorderdetailInJson) {
              if (
                (selectedData[idx].minTmpid &&
                  this.puorderdetailInJson[rIdx].AutoId) ||
                selectedData[idx].AutoId ===
                  this.puorderdetailInJson[rIdx].AutoId
              ) {
                this.puorderdetailInJson.splice(rIdx, 1)
                break
              }
            }
          }
        })
        .catch(error => {})
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>